<template>
  <div class="home">
    <header>
      <van-search placeholder="请输入搜索关键词" v-model="keyWord" @input="searchFood"/>
    </header>
    <div class="main">
      <!-- 左边菜单栏 -->
      <div class="left_tabbar">
        <div class="left-contont">
          <div v-for="(val,index) in goodsClassify" :key="index" @click="getFoodListByClassifyIdH5(index,val.id)" ref="menulist">
            <span href="javascript:;" :class="{active: index === tabBar_active_index}">{{val.name}}</span>
          </div>
        </div>
      </div>
      <!-- 左边菜单栏结束 -->
       <!-- 中间商品列 -->
      <div class="shopList">
        <div class="shopList_item_wrapper">
          <div class="shopList_item" v-for="(item,index) of foodList" :key="index">
            <div class="shopList_item_pic">
              <img :src="item.thumb_url">
            </div>
            <div class="shopList_item_right">
              <div class="shopList_item_name">{{item.name}}</div>
              <div class="shopList_item_desc">{{item.desc}}</div>
              <!-- <div class="shopList_item_sell">
                <span>月销176&nbsp;&nbsp;</span>
                <span>好评率100%</span>
              </div> -->
              <div class="shopList_item_price">
                <div>
                  <span class="sell_price">￥{{item.amount_money}}&nbsp;&nbsp;</span>
                </div>
                <img src="./../../../static/icon/add.png" @click="getAttributes(item.id)">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间商品列借宿 -->
    </div>
    <footer>
      <div class="foot-left" @click="showCart=true">
        <img src="./../../../static/icon/cart.png" alt>
        <div v-if="shopCartList.length == 0" style="font-size: 16px">未选购商品</div>
        <div v-else style="font-size: 16px">点击查看购物车</div>
      </div>
      <div @click="goToShopCar" class="foot-right" v-if="shopCartList.length > 0"><span style="color:#ff4a52;font-size: 16px;padding:0 10px;">下单 ￥{{shopCartListInfo.all_amount}}</span></div>
    </footer>

    <!-- 底部购物车 -->
    <van-popup v-model="showCart" position="bottom" round>
      <div class="cart-wrapper">
        <div class="cart-header">购物车</div>
        <!-- <div class="clear-cart">
          <img src="./../../../static/icon/dustbin.png" alt>
          <span>清空购物车</span>
        </div> -->
        <div class="cart-content">
          <div class="cart-content-item" v-for="(item,index) in shopCartList" :key='index'>
            <img
              :src="item.goods_product.thumb_url"
              alt
            >
            <div>
              <div class="cart-content-item-name">{{item.goods_product.name}}</div>
              <div class="cart-content-item-style">{{item.spu_name}}</div>
              <div class="cart-content-item-price">￥{{item.spu_price}}</div>
            </div>
            <div class="cart-content-item-counter">
              <van-stepper v-model="item.num"  @change="setShopNum(item)" :disabled="disabled" min="0" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 底部购物车 end -->

    <!-- 商品详情 -->
    <van-popup v-model="StyleVisible" round>
      <div class="style-wrapper">
        <div class="style-header">{{foodInfo.name}}</div>
        <div class="style-content">
          <div class="style-content-item">
            <div class="style-content-item-label">规格</div>
            <div class="style-content-item-style">
              <div :class="{'style-active': index == aciveIndex} " v-for="(item,index) in foodAttributes" :key="index" @click="selectAttr(item,index)">{{item.spu_name}}</div>
            </div>
          </div>
        </div>
        <div class="style-footer">
          <div class="style-left">
            <span>总价</span>
            <span class="style-price">￥{{oneFoodSum}}</span>
          </div>
          <div class="cart-content-item-counter">
            <van-stepper v-model="styleNum"/>
          </div>
        </div>
        <div class="style-wrapper-btn" @click="saveShopCartH5">确定</div>
      </div>
    </van-popup>
    <!-- 商品详情 end -->

    <!-- 就餐桌号 -->
    <van-popup v-model="firstLoad" round :close-on-click-overlay="false">
      <div class="zhuo-wrapper">
        <div class="zhuo-header">填写桌号</div>
        <div class="zhuo-content">
          <van-field 
            label="桌号" 
            v-model="zhuoNumInput" 
            placeholder="选择桌号"
            clickable
            readonly
            @click="showPicker1 = true"
          />
        </div>
        <div class="zhuo-footer">
          <van-button style="background-color:#ff7338;color:#ffffff" round @click="checkOrder">确认</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 就餐桌号 end -->

    <!-- 就餐人数 -->
    <van-popup v-model="secondLoad" round :close-on-click-overlay="false">
      <div class="member-wrapper">
        <div class="member-header">请选择就餐人数</div>
        <div class="member-content">
          <div class="member-num" :class="{active:item.select}" v-for="(item,index) in columns2" :key="index" @click="memberNum(item,index)">{{item.value}}</div>
        </div>
        <div class="member-footer">
          <van-button style="background-color:#ff7338;color:#ffffff" round @click="openZhuo">开始点餐</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 就餐人数 end -->

    <!-- 就餐人数btn -->
    <!-- <div class="bottom-nav" @click="firstLoad=true">
      <div class="bottom-nav-menu" >
        <span>就餐人数</span>
      </div>
    </div> -->
    <van-popup v-model="showPicker1" position="bottom" class="zhuo-num">
      <van-picker
        show-toolbar
        :columns="columns1"
        @cancel="showPicker1 = false"
        @confirm="onConfirm1"
        :visible-item-count="7"
      />
    </van-popup>
    <div v-if="orderNum">
      <router-link tag="div" to="/order" class="see-order">
        <img src="../../assets/images/menu.png">
        <span>我的订单</span>
      </router-link>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5';
import { Toast } from 'vant';
import { setTimeout } from 'timers';
import BScroll from 'better-scroll';
export default {
  data() {
    return {
      keyWord: "",
      goodsClassify: [],
      foodList: [], //商品数据
      tabBar_active_index: -1,
      page: 0,
      showCart: false, //显示购物车
      StyleVisible: false, //显示规格
      styleNum: "", //选中规格的数量
      firstLoad: false, //显示桌号
      secondLoad: false, //显示就餐人数
      // memberNum: "", //就餐人数
      memberNumInput: 1, //输入框的
      zhuoNumInput: "",
      // memberArr: [1, 2, 3, 4],
      foodAttributes:[],
      aciveIndex: 0,
      foodInfo: {},
      unit: 0, //当前单价
      OneAttributes: '',
      shopCartList: '',
      disabled: false,
      shopCartListInfo: '',
      showPicker1: false,
      columns1: [],
      columns2: [
        {value:1 ,select: true},
        {value:2 ,select: false},
        {value:3 ,select: false},
        {value:4 ,select: false},
        {value:5 ,select: false},
        {value:6 ,select: false},
        {value:7 ,select: false},
        {value:8 ,select: false},
        {value:9 ,select: false},
        {value:10 ,select: false},
        {value:11 ,select: false},
        {value:12 ,select: false},
        {value:13 ,select: false},
        {value:14 ,select: false},
        {value:15 ,select: false},
        {value:16 ,select: false},
      ],
      orderNum: '', //桌号订单
      leftScroll: null,
    };
  },
  computed:{
    //一个菜品的总价格
    oneFoodSum(){
      return (this.unit*this.styleNum).toFixed(2);
    }
  },
  watch: {
    // 初始化
    goodsClassify() {
      this.$nextTick(() => {
        this.leftScroll = new BScroll('.left_tabbar', {
          scrollY: true,
          scrollX: false,
          mouseWheel: true,
          click: true,
          taps: true,
        });
      });
    },
    foodList() {
      this.$nextTick(() => {
        this.rightScroll = new BScroll('.shopList', {
          scrollY: true,
          scrollX: false,
          mouseWheel: true,
          click: true,
          taps: true,
        });
      });
    },
  },
  mounted(){
    if(!this.$route.params.clearFlag){
      this.$currency.delCookie('orderNum')
      this.$currency.delCookie('shopCarNum')
      this.$currency.delCookie('zhuoNum')
    }
    this.getAllFoodList();
    this.getFoodClassify();
    this.isShowOpenZhuo();
    this.getSellerSeatList();
  },
  filters:{
    warpPrice(value){
      return value.toFixed(2)
    }
  },
  methods: {
    //获取桌号列表
    async getSellerSeatList(){
      let res = await this.$api.getSellerSeatList();
      if(res.level == "success"){
        let arr = []
        res.data.forEach((item, index)=>{
          arr.push(item.seat_number)
        })
        this.columns1 = arr;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    onConfirm1(value) {
      this.zhuoNumInput = value;
      this.showPicker1 = false;
    },
    memberNum(item,index) {
      this.memberNumInput = item.value;
      this.columns2.forEach((ele,num)=>{
        ele.select = false;
      })
      this.columns2[index].select = true;
    },
    //判断没有购物车号重新开桌
    isShowOpenZhuo(){
      if(!this.$currency.getCookie('shopCarNum')){
        this.firstLoad = true;
        //判断URL是否有参数（是否为扫码点餐）
        if(this.$currency.getQueryVariable('seat_num')){
          this.zhuoNumInput = this.$currency.getQueryVariable('seat_num');
        }
      }else{
        this.getShopCartList();
      }
    },
    //检查桌号订单状态
    async checkOrder(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        seat_num: this.zhuoNumInput,
      }
      var res = await this.$api.checkOrder(params);
      Toast.clear();
      if(res.level == "success"){
        if(res.status == 1){
          this.orderNum = res.data.order_num;
          this.setShopCarNum();
          this.$currency.setCookie('orderNum', res.data.order_num);
          this.firstLoad = false;
        }else{
          this.firstLoad = false;
          this.secondLoad = true;
          this.$currency.delCookie('orderNum');
        }
        this.$currency.setCookie('zhuoNum', this.zhuoNumInput);
      }else{
        Toast({ message: '请输入桌号' ,duration: 1500});
      }
    },
    //开桌
    async openZhuo(){
      Toast.loading({ mask: true, message: '加载中...' });
      let params = {
        seat_num: this.zhuoNumInput,
        person_num: this.memberNumInput
      }
      var res = await this.$api.openTable(params);
      Toast.clear();
      if(res.level == "success"){
        this.setShopCarNum();
        this.secondLoad = false;
        Toast({ message: res.message ,duration: 1500 });
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //设置购物车号
    setShopCarNum(){
      var shopCarNum= '';
      if(!this.$currency.getCookie('shopCarNum')){
        for(var i=0;i<6;i++){
          shopCarNum+= Math.floor(Math.random()*10);
        }
        shopCarNum= md5(new Date().getTime() +shopCarNum + '');
        this.$currency.setCookie('shopCarNum',shopCarNum)
      }
    },
    //添加购物车
    async saveShopCartH5(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        seat_number: this.$currency.getCookie('zhuoNum'),
        goods_id: this.foodInfo.id,
        cart_num: this.$currency.getCookie('shopCarNum'),
        num: this.styleNum,
        spu_id: this.OneAttributes.id
      }
      let res = await this.$api.saveShopCartH5(params);
      Toast.clear();
      if(res.level == "success"){
        this.StyleVisible = false;
        this.getShopCartList()
        Toast({ message: res.message ,duration: 1500});
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //获取购物车列表
    async getShopCartList(){
      let params = {
        cart_num:this.$currency.getCookie('shopCarNum')
      }
      let res = await this.$api.getShopCartList(params);
      if(res.level == "success"){
        this.shopCartList = res.data;
        this.shopCartListInfo = res.info;
        this.disabled = false;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //获取菜品列表
    async getAllFoodList(){
      this.tabBar_active_index = -1;
      let res = await this.$api.getAllFoodList();
      if(res.level == "success"){
        this.foodList = res.data;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //关键词获取菜品列表
    async searchFood(){
      Toast.loading({   mask: true,   message: '加载中...' });
      let params = {
        keyword:this.keyWord
      }
      let res = await this.$api.searchFood(params);
      Toast.clear();
      if(res.level == "success"){
        this.foodList = res.data;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //关键词菜品分类列表
    async getFoodClassify(){
      let res = await this.$api.getFoodClassify();
      if(res.level == "success"){
        this.goodsClassify = res.data;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //购物车设置菜品数量
    async setShopNum(item){
      Toast.loading({   mask: true,   message: '加载中...' });
      this.disabled = true;
      let params = {
        seat_number: this.$currency.getCookie('zhuoNum'),
        goods_id: item.goods_product.id,
        cart_num: this.$currency.getCookie('shopCarNum'),
        num: item.num,
        spu_id: item.goods_spu_id
      }
      let res = await this.$api.saveShopCartH5(params);
      Toast.clear();
      if(res.level == "success"){
        this.StyleVisible = false;
        this.getShopCartList()
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //按分类筛选菜品列表
    async getFoodListByClassifyIdH5(index,id){
      Toast.loading({   mask: true,   message: '加载中...' });
      this.tabBar_active_index = index;
      this.page = 0;
      let params = {
        classify_id:id
      }
      this.foodList = [];
      let res = await this.$api.getFoodListByClassifyIdH5(params);
      Toast.clear();
      if(res.level == "success"){
        this.foodList = res.data;
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    async getAttributes(id){
      //显示商品规格
      this.aciveIndex = 0;
      this.StyleVisible = true;
      let params = {
        goods_id:id
      }
      let res = await this.$api.getAttributes(params);
      if(res.level == "success"){
        this.foodAttributes = res.data;
        this.OneAttributes = this.foodAttributes[0];
        this.foodInfo = res.info;
        this.unit = res.data[0].price; //单价初始化
        this.styleNum = 1; //初始化
      }else{
        Toast({ message: res.message ,duration: 1500});
      }
    },
    //选择规格
    selectAttr(item,index){
      this.aciveIndex = index;
      this.OneAttributes = item;
      this.unit = parseInt(item.price);
    },
    //跳转到购物车页面
    goToShopCar(){
      if(!this.$currency.getCookie('shopCarNum')){
        Toast({ message: '请先填写人数和桌号' ,duration: 1500});
        return
      }
      if(this.shopCartList == 0){
        Toast({ message: '购物车无商品' ,duration: 1500});
        return
      }
      this.$router.push({
        path: '/shopCar',            
      })
    }
  }
};
</script>
<style lang="scss" scoped>
/* 左边导航栏 */
.home {
  font-size: 30px;
  min-height: 100vh;
  overflow: hidden;
  .zhuo-num{
    height: 55%;
  }
  .person-num{
    height: 55%;
  }
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 3px solid #fafafa;
  z-index: 10;
}

.main{
  height: 85vh;
  margin-top:110px;
  overflow: hidden;
  display: flex;
  .left_tabbar {
    width: 220px;
    overflow: hidden;
  }
  .left-contont {
    padding-bottom: 280px;
    height: 100%;
    background-color: #fafafa;
    div{
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      font-weight: lighter;
      background-color: #fafafa;
      color: #666;
      border-bottom: 2px solid #fff;
      span{
        position: relative;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
      }
      .active{
        color: red;
      }
      .active::before{
        content: "";
        width: 6px;
        height: 100%;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  /* 中间商品栏 */
  .shopList {
    flex: 1;
    height: 100%;
    background: #fafafa;
    overflow: hidden;
    overflow-y:scroll;
  }
  .shopList_item_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 150px;
  }
  .shopList_item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    background: #fff;
    padding: 8px;
  }
  .shopList_item_pic{
    width: 160px;
    height: 160px;
    margin-right: 12px;
  }
  .shopList_item_pic > img {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    border-radius: 4px;
    border: 2px solid #cccccc;
  }
  .shopList_item_right {
    flex: 1;
    text-align: left;
  }
  .shopList_item_name {
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 20px 0;
    font-size: 32px;
  }
  .shopList_item_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
      margin-bottom: 10px;
      border-radius: 4px;
    }
    .init_price {
      color: gray;
      text-decoration: line-through;
    }
    .sell_price {
      color: #fe464e;
      font-size: 34px;
    }
  }
  .shopList_item_desc {
    width: 280px;
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #888;
  }
  .shopList_item_sell {
    margin: 10px 0;
    font-size: 18px;
    color: rgb(185, 183, 183);
  }
}

//底部结算栏
footer {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #414143;
  height: 100px;
  font-size: 35px;
  .foot-left {
    display: flex;
    align-items: center;
    color: #a9a9ab;
    img {
      width: 100px;
      height: 100px;
      position: relative;
      top: -30px;
      margin: 0 30px;
      // background:#fe464e;
      border-radius: 50%;
    }
  }
  .foot-right {
    height: 100px;
    line-height: 100px;
    background: #535355;
    color: #a9a9ab;
    padding: 0 20px;
  }
}

//弹出的购物车
.cart-wrapper {
  max-height: 500px;
  padding-bottom: 150px;
  position: relative;
  overflow: hidden;
  .cart-header {
    background: #ff4a52;
    color: #fff;
    padding: 10px 0;
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    border-radius:12px 12px 0 0;
    z-index: 18;
  }
  .cart-content {
    max-height: 500px;
    padding-top: 50px;
    overflow-y: scroll;
    &-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 20px;
      img {
        width: 160px;
        height: 160px;
        margin-right: 20px;
      }
      &-name {
        font-weight: 600;
        font-size: 30px;
      }
      &-style {
        font-size: 16px;
        color: gray;
        padding: 10px 0;
      }
      &-price {
        color: #fe464e;
        text-align: left;
      }
    }
    .cart-content-item-counter {
      margin-left: 40px;
    }
    .cart-content-item-name,
    .cart-content-item-style{
      width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
  }
}


//规格弹窗
.style-wrapper {
  border-radius: 20px;
  padding: 20px;
  width: 80vw;
  .style-header {
    text-align: left;
    font-weight: 600;
    padding: 20px 0;
  }
  .style-content-item-label {
    text-align: left;
    margin: 30px 0;
  }
  .style-content-item {
    margin: 40px 0;
  }
  .style-content-item-style {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    & > div {
      border-radius: 10px;
      background-color: 1px solid gray;
      padding: 10px 0;
      width: 30%;
    }
    .style-active {
      background-color: #fdf6ec;
      border-color: #faecd8;
      color: #e6a23c;
    }
  }
  .style-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
    .style-price {
      font-size: 40px;
      color: #fe464e;
    }
  }
  .style-wrapper-btn{
      border-radius: 10px;
      height: 60px;
      line-height: 60px;
      background-color: #fe464e;
      color: #fff;
      margin-top: 20px;
  }
}

.member-wrapper,
.zhuo-wrapper {
  .member-header,
  .zhuo-header {
    text-align: left;
    font-weight: 600;
    padding-left: 20px;
    margin-bottom: 30px;
  }
  width: 80vw;
  padding: 20px;
  .member-footer
  .zhuo-footer {
    margin-top: 30px;
  }
  .member-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .member-num{
      width: 22%;
      height: 60px;
      line-height: 60px;
      border: 2px solid #cccccc;
      border-radius: 30px;
      margin-bottom: 14px;
    }
    .active{
      border-color: #ff7338;
      background-color: #ff7338;
      color: #fff;
    }
  }
}
.see-order{
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: rgba(253, 5, 5 ,.7);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 4px solid #fff;
  padding: 12px;
  font-size: 24px;
  z-index: 8888;
  img{
    width: 50px;
    height: 50px;
  }
}


</style>
<style >

.home .van-radio-group {
  display: flex;
  flex-wrap: wrap;
}
.home .van-radio {
  margin: 20px;
}

.home .van-button {
  width: 80%;
  height: 80px;
  line-height: 80px;
}

.van-popup{
  border-radius: 12px;
  -webkit-overflow-scrolling : touch;
}
</style>
